<!-- 湿度示例图 -->
<template>
  <div style="position: relative;">
    <div style="display: flex; align-items: center;">
      <img src="@/assets/imgs/hum.png" width="28px" height="28px" alt=""/>
      <span style="margin-left: 8px; font-size: 18px; color: #566A7F;">湿度</span>
    </div>
    <div class="aic flex">
      <el-radio-group v-model="radioType" @change="changeDate" style="position: absolute; top: 0; left: 40%;">
        <el-radio-button label="DAY">日</el-radio-button>
        <el-radio-button label="MONTH">月</el-radio-button>
        <el-radio-button label="YEAR">年</el-radio-button>
      </el-radio-group>
    </div>
    <div id="hum-chart"></div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, provide, ref } from 'vue';
//  按需引入 echarts
import * as echarts from 'echarts';
import dayjs from 'dayjs';
import { getFacilityAttrTendencyChart } from '@/api/yz/facility-summary/index'

const props = defineProps({
  facilityId: {
    type: Number,
    default: null,
  },
});

watch(() => props.facilityId, 
() =>{
  loadData()
})

const range = ref([dayjs().startOf('month').format('YYYY-MM-DD'), dayjs().endOf('month').format('YYYY-MM-DD')]);

// 选中的时间类型 本周本月自定义
const radioType = ref('MONTH');

// 点击本日本周本月按钮触发
const changeDate = (value) => {
  radioType.value = value;
  range.value[0] = '';
  range.value[1] = '';
  if (radioType.value === 'DAY') {
    range.value[0] = dayjs().format('YYYY-MM-DD');
    range.value[1] = dayjs().format('YYYY-MM-DD');
  } else if (radioType.value === 'MONTH') {
    range.value[0] = dayjs().startOf('month').format('YYYY-MM-DD');
    range.value[1] = dayjs().endOf('month').format('YYYY-MM-DD');
  } else if (radioType.value === 'YEAR') {
    range.value[0] = dayjs().startOf('year').format('YYYY-MM-DD');
    range.value[1] = dayjs().endOf('year').format('YYYY-MM-DD');
  }
  loadData();
};

// 选中时间范围
const dateRange = computed(() => {
  return getAllDateCN(new Date(range.value[0]), new Date(range.value[1]));
});

// 获取时间范围内数组
const getAllDateCN = (startTime, endTime) => {
  const dateAll = [];
  let i = 0;
  while (endTime.getTime() - startTime.getTime() >= 0) {
    const year = startTime.getFullYear();
    const month = startTime.getMonth() + 1;
    const day = startTime.getDate();
    dateAll[i] = `${year}-${month}-${day}`;
    startTime.setDate(startTime.getDate() + 1);
    i += 1;
  }
  return dateAll;
};

// 数据加载
const loadData = async () => {
  await loadFacilityAttrTendencyChart()
  // 重新渲染图表
  init();
};

provide('echarts', echarts);

onMounted(() => {
  setTimeout(init, 1000);
});

const init = () => {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.getElementById('hum-chart'));
  // 绘制图表
  myChart.setOption({
    title: {
      text: '湿度趋势',
    },
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data: ['发送次数', '查看次数', '查看人数'],
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    toolbox: {
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: 'category',
      data: dateRange.value,
    },
    yAxis: {
      type: 'value',
    },
    series: [
      {
        data: humData.value,
        type: 'bar',
        stack: 'hum',
        name: '湿度'
      }
    ],
  });
};

const humData = ref([300, 700, 100, 120, 90, 500, 200, 80, 110, 400, 100, 600])

// 加载温度趋势图数据
const loadFacilityAttrTendencyChart = async () => {
  try {
    const params = {
      facilityId: props.facilityId,
      attrKey: 'hum',
      intervalType: radioType.value
    }
    const res = await getFacilityAttrTendencyChart(params)
    humData.value = res.attrTendencyChartList
  } catch (error) {
    console.log(error)
  }
}

onMounted(loadFacilityAttrTendencyChart)
</script>

<style scoped lang="scss">
#hum-chart {
  width: 100%;
  height: 200px;
  margin-top: 16px;
}
</style>
